<!-- 音频可视化（需麦克风权限） -->
<canvas id="visualizer"></canvas>

<style>
  canvas {
    position: fixed;
    top: 0;
    left: 0;
  }
  body { margin: 0; background: #000; }
</style>

<script>
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);
      const analyser = audioCtx.createAnalyser();
      
      source.connect(analyser);
      analyser.fftSize = 256;
      const bufferLength = analyser.frequencyBinCount;
      const dataArray = new Uint8Array(bufferLength);

      function render() {
        analyser.getByteFrequencyData(dataArray);
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        dataArray.forEach((value, i) => {
          ctx.fillStyle = `hsl(${i*2}, 100%, 50%)`;
          ctx.fillRect(
            i * 15, 
            canvas.height - value * 2,
            10,
            value * 2
          );
        });
        requestAnimationFrame(render);
      }
      render();
    });
</script>
